<style lang="less">
@import "./main.less";
</style>
<template>
  <div id="main" class="main" :class="{'main-hide-text': hideMenuText}">
    <div
      class="sidebar-menu-con"
      :style="{width: hideMenuText?'60px':'200px', overflow: hideMenuText ? 'visible' : 'auto',
             background: $store.state.menuTheme === 'dark' ? darkColor : lightColor}"
    >
      <div class="logo-con">
        <img v-show="!hideMenuText" src="../images/logo.png">
        <img v-show="hideMenuText" src="../images/logo-min.png">
      </div>
      <sidebar-menu v-if="!hideMenuText" :menuList="menuList" :iconSize="16"/>
      <sidebar-menu-shrink :icon-color="menuIconColor" v-else :menuList="menuList"/>
    </div>
    <div class="main-header-con" :style="{paddingLeft: hideMenuText?'60px':'200px'
    }">
      <div class="main-header">
        <div class="navicon-con">
          <Button
            :style="{transform: 'rotateZ(' + (this.hideMenuText ? '-90' : '0') + 'deg)'}"
            type="text"
            @click="toggleClick"
          >
            <Icon type="navicon" size="32"></Icon>
          </Button>
        </div>
        <div class="header-middle-con">
          <div class="main-breadcrumb">
            <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
          </div>
        </div>
        <div class="header-avator-con">
          <div class="user-dropdown-menu-con">
            <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
              <Dropdown trigger="click" @on-click="handleClickUserDropdown">
                <a href="javascript:void(0)">
                  <span class="main-user-name">{{ userName }}</span>
                  <Icon type="arrow-down-b"></Icon>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem name="ownSpace">个人中心</DropdownItem>
                  <DropdownItem name="logout" divided>退出登录</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </Row>
          </div>
        </div>
      </div>
      <!--<div class="tags-con">-->
      <!--<tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>-->
      <!--</div>-->
    </div>
    <div class="single-page-con" :style="{paddingLeft: hideMenuText?'60px':'200px'}">
      <div class="single-page">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import sidebarMenu from "./main_components/sidebarMenu.vue";
import breadcrumbNav from "./main_components/breadcrumbNav.vue";
import sidebarMenuShrink from "./main_components/sidebarMenuShrink.vue";
import Cookies from "js-cookie";
import util from "../libs/util.js";

export default {
  components: {
    sidebarMenu,
    breadcrumbNav,
    sidebarMenuShrink
  },
  data() {
    return {
      spanLeft: 4,
      spanRight: 20,
      currentPageName: "",
      hideMenuText: false,
      userName: "",
      showFullScreenBtn: window.navigator.userAgent.indexOf("MSIE") < 0,
      isFullScreen: false,
      messageCount: 0,
      lockScreenSize: 0,
      darkColor: "#1C3648",
      //darkColor: "#082d50",
      lightColor: "white"
    };
  },
  computed: {
    menuList() {
      return this.$store.state.menuList;
    },
    tagsList() {
      return this.$store.state.tagsList; // 所有页面的页面对象
    },
    currentPath() {
      return this.$store.state.currentPath; // 当前面包屑数组
    },
    menuIconColor() {
      return this.$store.state.menuTheme === "dark"
        ? this.lightColor
        : this.darkColor;
    },
    backgroundColor() {
      return this.$store.state.menuTheme === "dark"
        ? this.lightColor
        : this.darkColor;
    },
    avatorPath() {
      return localStorage.avatorImgPath;
    }
  },
  methods: {
    init() {
      //                this.$store.commit('setCurrentPageName', this.$route.name);
      let pathArr = util.setCurrentPath(this, this.$route.name);
      // 设置访问权限
      const user = JSON.parse(Cookies.get("user"));
      Cookies.set("access", user.user_role);
      this.$store.commit("updateMenulist");
      if (pathArr.length >= 2) {
        this.$store.commit("addOpenSubmenu", pathArr[1].name);
      }
      this.userName = user.user_name;
      let messageCount = 3;
      this.messageCount = messageCount.toString();
    },
    toggleClick() {
      this.hideMenuText = !this.hideMenuText;
    },
    handleClickUserDropdown(name) {
      if (name === "logout") {
        // 退出登录
        this.$store.commit("logout", this);
        this.$router.push({
          name: "login"
        });
      } else if (name === "ownSpace") {
        util.openNewPage(this, "ownspace_index");
        this.$router.push({
          name: "ownspace_index"
        });
      }
    },
    handleFullScreen() {
      let main = document.getElementById("main");
      if (this.isFullScreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (main.requestFullscreen) {
          main.requestFullscreen();
        } else if (main.mozRequestFullScreen) {
          main.mozRequestFullScreen();
        } else if (main.webkitRequestFullScreen) {
          main.webkitRequestFullScreen();
        } else if (main.msRequestFullscreen) {
          main.msRequestFullscreen();
        }
      }
    }
  },
  watch: {
    $route(to) {
      this.$store.commit("setCurrentPageName", to.name);
      let pathArr = util.setCurrentPath(this, to.name);
      if (pathArr.length > 2) {
        this.$store.commit("addOpenSubmenu", pathArr[1].name);
      }
    }
  },
  mounted() {
    this.init();
  },
  created() {}
};
</script>
